<template>
	<view class="select_activity safe_area">
		<u-search placeholder="根据活动名称搜索" v-model="activityName" :clearabled="true" :show-action="false" height="40"
			@change="handleSearchChange" @clear="handleSearchChange" shape="square"></u-search>
		<scroll-view :scroll-top="scrollTop" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered"
			@refresherrefresh="onRefresh" :refresher-threshold="50" @scrolltolower="scrolltolower"
			class="select_activity_scroll_view">
			<view class="select_activity_item" v-for="item in dataSouse" :key="item?.id">
				<view class="select_activity_item_header">
					<view class="select_activity_item_header_left">
						<image :src="item?.cover"></image>
						<text>{{item?.activityName}}</text>
					</view>
					<button class="select_activity_item_header_right" @click="handleSelect(item)">选择</button>
				</view>
				<view class="select_activity_item_body">
					<view>
						{{item?.activityProfile}}
					</view>
				</view>
			</view>
			<u-loadmore :status="status" @loadmore="scrolltolower" v-if="status !== 'nomore'"></u-loadmore>
		</scroll-view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, reactive, unref, onMounted, getCurrentInstance, toRaw } from 'vue';
	import { qxActivityManageList } from "@/config/index.api";

	const activityName = ref('');
	const dataSouse = ref([]);
	const triggered = ref(false);
	const scrollTop = ref(0);
	const status = ref('loadmore');
	const pagination = reactive({ pageNo: 1, total: 0, pageSize: 10 });

	onMounted(() => {
		loadData()
	})

	/**
	 * 加载数据
	 */
	async function loadData() {
		if (pagination.pageNo === 1) {
			dataSouse.value = [];
		}
		status.value = 'loading';
		const res = await qxActivityManageList({ ...pagination, activityName: unref(activityName) });
		triggered.value = false;
		pagination.total = res?.total;
		dataSouse.value?.push(...res?.records);
		if (unref(dataSouse)?.length < pagination.total) {
			status.value = 'loadmore';
		} else {
			status.value = 'nomore';
		}
	}

	/**
	 * 滚动到底部操作
	 */
	function scrolltolower() {
		if (unref(dataSouse)?.length < pagination.total && (unref(dataSouse)?.length / pagination.pageSize == pagination.pageNo)) {
			pagination.pageNo++;
			loadData();
		}
	}

	/**
	 * 自定义下拉刷新被触发
	 */
	function onRefresh() {
		triggered.value = true;
		pagination.pageNo = 1;
		loadData();
	}

	/**
	 * 搜索监听
	 */
	function handleSearchChange(value) {
		console.log(value, 'value');
		pagination.pageNo = 1
		activityName.value = value ?? '';
		uni.$u.throttle(loadData, 1000, false);
	}

	/**
	 * 选择
	 */
	function handleSelect(item) {
		uni.showModal({
			content: '确认选择该活动发布动态吗？',
			confirmColor: '#FF943C',
			success: async function (res) {
				if (res.confirm) {
					uni.navigateBack({
						success(res) {
							console.log(res, 'res');
							uni.$emit('selectData', toRaw(item))
						}
					});
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		})
	}
</script>

<style lang="scss" scoped>
	.select_activity {
		::v-deep .u-search {
			background-color: #ffffff;
			padding: 16rpx 32rpx;
			font-size: 32rpx;
		}

		.select_activity_scroll_view {
			height: calc(100vh - 55px);
			margin-top: 4rpx;
			background-color: #ffffff;

			.select_activity_item {
				padding: 26rpx 24rpx 10rpx 24rpx;

				.select_activity_item_header {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.select_activity_item_header_left {
						display: flex;
						align-items: center;
						font-size: 36rpx;
						font-weight: 500;

						image {
							width: 64rpx;
							height: 64rpx;
							margin-right: 16rpx;
							border-radius: 16rpx;
						}
					}

					.select_activity_item_header_right {
						border-radius: 54rpx;
						background-color: #F5F7F9;
						width: 118rpx;
						height: 52rpx;
						line-height: 52rpx;
						color: #FF943C;
						font-size: 28rpx;
						margin: 0;
						padding: 0;

						&::after {
							border: 0;
						}
					}
				}

				.select_activity_item_body {
					border: 4rpx dashed #E5E5E5;
					padding: 20rpx;
					color: #9AAFBC;
					font-size: 28rpx;
					line-height: 44rpx;
					margin-top: 24rpx;

					view {
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						/* 显示的最大行数 */
						overflow: hidden;
					}
				}
			}
		}
	}
</style>